@import 'mediawiki.mixins.animation';
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
@rcfilters-spinner-width: 70px;
&:not( .mw-recentchanges-toplinks-collapsed ) {
// Same as the legend
- border: 1px solid #ddd;
+ border: 1px solid @colorGray12;
}
}
display: inline-block;
width: 12px;
height: 12px;
- background-color: #c8ccd1;
+ background-color: @colorGray12;
border-radius: 100%;
.animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
}
transform: scale( 0.7 );
}
40% {
- background-color: #a2a9b1;
+ background-color: @colorGray10;
-webkit-transform: scale( 1 );
transform: scale( 1 );
}
transform: scale( 0.7 );
}
40% {
- background-color: #a2a9b1;
+ background-color: @colorGray10;
-moz-transform: scale( 0.7 );
transform: scale( 1 );
}
transform: scale( 0.7 );
}
40% {
- background-color: #a2a9b1;
+ background-color: @colorGray10;
transform: scale( 1 );
}
}
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.variables';
.animation-delay( ... ) {
}
// This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: #54595d, @emptyBackground: false ) {
+.mw-rcfilters-mixin-circle( @color: @color-base--inverted, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
.box-sizing( border-box );
min-width: @diameter;
width: @diameter;
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
@keyframes fadeBlue {
60% {
- border-top-color: #36c;
+ border-top-color: @colorProgressive;
}
100% {
- border-top-color: #c8ccd1;
+ border-top-color: @colorGray12;
}
}
&-previousChangesIndicator {
margin: 10px 0;
- border-top: 2px solid #c8ccd1;
+ border-top: 2px solid @colorGray12;
animation: 1s ease fadeBlue;
}
// We want the expand button to appear outside the color
// to match the way the general highlight background appears
&-enhanced-grey td:not( :nth-child( -n+2 ) ) {
- background-color: #dee0e3;
+ background-color: @light-gray;
}
&-highlighted {
}
.mw-changeslist-legend {
- background-color: #fff;
+ background-color: @background-color-base;
}
// Correction for Enhanced RC
// a custom color rather than the computed tint
// see https://phabricator.wikimedia.org/T161267
.mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 {
- .highlight-changesListWrapperWidget( #ccdecc );
+ .highlight-changesListWrapperWidget( @light-green );
}
.highlight-color-mix( c1, c4 );
.highlight-color-mix( c1, c5 );
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
.mw-rcfilters-ui-filterMenuHeaderWidget {
&-title {
display: inline-block;
font-size: 1.2em;
padding: 0.75em 0 0.75em 0.5em;
- // TODO: Unify colors with official design palette
- color: #54595d;
+ color: @colorGray5;
}
&-helpIcon {
}
&-header {
- border-bottom: 1px solid #c8ccd1;
- background: #f8f9fa;
+ border-bottom: 1px solid @colorGray12;
+ background-color: @colorGray15;
&-invert,
&-highlight {
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
.mw-rcfilters-ui-filterMenuOptionWidget {
&.oo-ui-flaggedElement-muted {
// are also inverted, so if they are also selected, we
// should make sure the selected background is shown rather
// than the muted one
- background-color: #f8f9fa; // Base90 AAA
+ background-color: @colorGray15;
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
- color: #54595d; // Base20 AAA
+ color: @colorGray5;
}
&.oo-ui-optionWidget-highlighted {
// Copying over styles from OOUI, since it must
// override our 'muted' state
- background-color: #eaecf0;
- color: #000;
+ background-color: @colorGray14;
+ color: @colorGray1;
}
}
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
- background: #eaecf0;
+ background: @colorGray14;
padding-bottom: 0.7em;
&-header {
padding: 0 0.75em;
// Use a high specificity to override OOUI
.oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label {
- color: #54595d;
+ color: @colorGray5;
.box-sizing( border-box );
display: inline-block;
}
padding: 0;
&:focus {
- box-shadow: none;
+ .box-shadow( none );
outline: 0;
}
}
@import 'mediawiki.mixins';
@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-filterTagMultiselectWidget {
max-width: none;
}
&.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
- border: 1px solid #a2a9b1;
+ border: 1px solid @colorGray10;
border-bottom: 0;
- background-color: #f8f9fa;
+ background-color: @colorGray15;
border-radius: 2px 2px 0 0;
padding: 0.6em;
margin-top: 1em;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
- background-color: #eaf3ff; // Accent90
+ background-color: @background-color-primary;
}
&-wrapper {
&-content {
&-title {
font-weight: bold;
- color: #54595d;
+ color: @colorGray5;
}
&-savedQueryTitle {
- color: #222; // Base10
+ color: @colorGray2;
font-weight: bold;
vertical-align: top;
margin-left: 1em;
width: 1em;
&-widget.oo-ui-widget {
- border: 1px solid #a2a9b1;
+ border: 1px solid @colorGray10;
border-left-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: block;
text-align: right;
height: 2.5em;
- box-sizing: border-box;
+ .box-sizing( border-box );
.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
margin-left: 0;
}
&-emptyFilters {
- color: #72777d;
+ color: @colorGray7;
}
&-cell-filters {
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
.mw-rcfilters-ui-highlightColorPickerWidget {
.mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
// Override border to dashed
- border: 1px dashed #54595d;
+ border: 1px dashed @colorGray5;
&.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
&.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-itemMenuOptionWidget {
min-height: 3.5em;
.box-sizing( border-box );
&:not( :last-child ) {
- border-bottom: 1px solid #eaecf0; // Base80 AAA
+ border-bottom: 1px solid @colorGray14;
}
&-view-namespaces {
- border-top: 5px solid #c8ccd1;
+ border-top: 5px solid @colorGray12;
&:first-child,
&.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
}
&:hover {
- background-color: #f8f9fa;
+ background-color: @colorGray15;
}
.mw-rcfilters-ui-table {
}
&.oo-ui-optionWidget-selected {
- background-color: #eaf3ff; // Accent90 AAA
+ background-color: @background-color-primary;
}
&-label {
&-title {
font-weight: bold;
font-size: 1.15em;
- color: #222;
+ color: @colorGray2;
}
&-desc {
- color: #54595d;
+ color: @colorGray5;
white-space: normal;
}
}
&-excludeLabel {
width: 5em;
padding-left: 1em;
- color: #54595d; // Base20 AAA
+ color: @colorGray5;
}
&-highlightButton {
+@import 'mediawiki.mixins';
+
.mw-rcfilters-ui-liveUpdateButtonWidget {
margin-left: 1em;
@keyframes ripple {
0%,
35% {
- transform: scale( 0 );
+ .transform( scale( 0 ) );
opacity: 1;
}
50% {
- transform: scale( 1.5 );
+ .transform( scale( 1.5 ) );
opacity: 0.8;
}
100% {
opacity: 0;
- transform: scale( 4 );
+ .transform( scale( 4 ) );
}
}
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
.mw-rcfilters-ui-menuSelectWidget {
z-index: auto;
&-noresults {
display: none;
padding: 0.5em;
- color: #54595d;
+ color: @colorGray5;
.oo-ui-menuSelectWidget-invisible & {
display: inline-block;
&-footer {
padding: 0.5em;
- background-color: #f8f9fa;
- border-top: 1px solid #c8ccd1;
+ background-color: @colorGray15;
+ border-top: 1px solid @colorGray12;
& + & {
border-top: 0;
+@import 'mediawiki.ui/variables';
+
.mw-rcfilters-ui-savedLinksListItemWidget {
padding: 0 0.5em;
line-height: normal;
&:hover {
// Mimicking optionWidget styles
- background-color: #eaecf0;
- color: #000;
+ background-color: @colorGray14;
+ color: @colorGray1;
}
.mw-rcfilters-ui-cell {
overflow: hidden;
cursor: pointer;
margin-left: 0.5px;
- color: #36c; // Accent50;
+ color: @colorProgressive;
}
&-icon,
+@import 'mediawiki.ui/variables';
+
.mw-rcfilters-ui-savedLinksListWidget {
&-menu {
width: 100%;
// Extra specificity needed to override OOUI rule that sets white-space: nowrap;
// on labels inside options
&.oo-ui-optionWidget .oo-ui-labelElement-label {
- color: #72777d;
+ color: @colorGray7;
white-space: normal;
}
+@import 'mediawiki.ui/variables';
@import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
.mw-rcfilters-ui-tagItemWidget {
// Background and color of the capsule widget need a bit
// more specificity to override OOUI internals
&.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
// Muted state
- background-color: #eaecf0;
- border-color: #c8ccd1;
+ background-color: @colorGray14;
+ border-color: @colorGray12;
.oo-ui-labelElement-label {
- color: #72777d;
+ color: @colorGray7;
}
.oo-ui-buttonWidget {
opacity: @muted-opacity;
&.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
.oo-ui-labelElement-label {
- color: #b32424;
+ color: @colorDestructiveActive;
}
}
// The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/
// and will be available in the next OOUI release.
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
- background-color: #eaf3ff;
- border-color: #36c;
+ background-color: @background-color-primary;
+ border-color: @colorProgressive;
}
&-popup-content {
padding: 0.5em;
- color: #54595d;
+ color: @colorGray5;
}
&.oo-ui-labelElement .oo-ui-labelElement-label {
+@import 'mediawiki.ui/variables';
+
.mw-rcfilters-ui-viewSwitchWidget {
label.oo-ui-labelWidget {
- color: #54595d;
+ color: @colorGray5;
font-weight: bold;
}
+@import 'mediawiki.ui/variables';
+
.mw-rcfilters-ui-watchlistTopSectionWidget {
&-watchlistDetails {
width: 100%;
&-separator {
margin-top: 1em;
- border-top: 2px solid #eaecf0; // Base80 AAA
+ border-top: 2px solid @colorGray14;
}
}
+@background-color-base: #fff;
+@background-color-primary: #eaf3ff;
+@color-base--inverted: #fff;
+
+// Colors not on WikimediaUI color palette
+@light-gray: #dee0e3;
+@light-green: #ccdecc;
+
// Highlight color definitions
@highlight-none: #fff;
@highlight-c1: #36c;